<template>
	<div class="customForm">
		<div class="form-group" :class="{'has-error': errors.has(item.fieldname) }" v-for="(item, index) in formData.field">
			<!-- 输入框*************开始 -->
			<div v-if="item.fieldtype=='Text'">
				<label :for="item.fieldname" class="col-sm-2 control-label">
					<span class="text-danger" v-show="item.setting.validate.required==1">*</span>
					{{item.name}}
				</label>
				<div class="col-sm-10">
					<span class="control has-icon has-icon-right">
						<input class="form-control" v-validate="{ rules: { required: item.setting.validate.required==1} }" :class="{'input': true, 'is-danger': errors.has(item.fieldname) }" :style="{width:'40%'}" v-model="formData.data[item.fieldname]" :id="item.fieldname" :name="item.fieldname">
					  
					  <span v-show="errors.has(item.fieldname)" class="help text-danger">
					  <i class="fa fa-warning has-error"></i>
					  {{ errors.first(item.fieldname) }}</span>
					  <div class="text-muted">{{item.setting.validate.tips}}</div>
					</span>
				</div>
			</div>
			<!-- 输入框*************结束 -->
			<!-- 密码输入框*************开始 -->
			<div v-else-if="item.fieldtype=='password'">
				<label :for="'customForm_'+index" class="col-sm-2 control-label">
					<span class="text-danger" v-show="item.setting.validate.required==1">*</span>
					{{item.name}}
				</label>
				<div class="col-sm-10">
				  <span class="control has-icon has-icon-right">
						<input type="password" class="form-control" v-validate="{ rules: { required: item.setting.validate.required==1} }" :class="{'input': true, 'is-danger': errors.has(item.fieldname) }" :style="{width:item.setting.option.width+'px'}" v-model="formData.data[item.fieldname]" :id="item.fieldname" :name="item.fieldname">
					  <i v-show="errors.has(item.fieldname)"  :style="{left:(item.setting.option.width-25)+'px'}" class="fa fa-warning has-error"></i>
					  <span v-show="errors.has(item.fieldname)" class="help text-danger">
					  {{ errors.first(item.fieldname) }}</span>
					  <div class="text-muted">{{item.setting.validate.tips}}</div>
					</span>
				</div>
			</div>
			<!-- 密码输入框*************结束 -->

			<!-- 单选框*************开始 -->
			<div v-else-if="item.fieldtype=='Radio'" class="clearfix">
				<label class="col-sm-2 control-label">{{item.name}}</label>
				<div class="col-sm-10">
				<div>
					<div v-for="(radioList,ra_index) in item.setting.option.options.split('\n')" class="radio3 radio-check radio-inline">
						<input type="radio" v-if="ra_index==0" v-validate="{ rules: { required: item.setting.validate.required==1} }" :id="item.id+'_'+ra_index" v-model="formData.data[item.fieldname]" :name="item.fieldname" v-bind:value="((radioList.split('|'))[1]).replace(/^\s+|\s+$/g,'')">
						<input type="radio" v-else :id="item.id+'_'+ra_index" v-model="formData.data[item.fieldname]" :name="item.fieldname" v-bind:value="((radioList.split('|'))[1]).replace(/^\s+|\s+$/g,'')">
						<label :for="item.id+'_'+ra_index">
						{{(radioList.split("|"))[0]}}
						</label>
					</div></div>
					<span class="help text-danger" v-show="errors.has(item.fieldname)">
					<i class="fa fa-warning has-error"></i>
					{{ errors.first(item.fieldname) }}</span>
				</div>
			</div>
			<!-- 单选框*************结束 -->
			<!-- 多选框*************开始 -->
			<div v-else-if="item.fieldtype=='Checkbox'" class="clearfix">
				<label class="col-sm-2 control-label">{{item.name}}</label>
				<div class="col-sm-10">
					<div v-for="(radioList,ra_index) in item.setting.option.options.split('\n')" class="checkbox3 checkbox-inline checkbox-check checkbox-light">
						<input type="checkbox" :id="item.id+'_'+ra_index" v-model="formData.data[item.fieldname]" v-bind:value="(radioList.split('|'))[1]">
						<label :for="item.id+'_'+ra_index">
						{{(radioList.split("|"))[0]}}
						</label>
					</div>
				</div>
			</div>
			<!-- 多选框*************结束 -->
			<!-- 下拉框*************开始 -->
			<div v-else-if="item.fieldtype=='Select'" class="clearfix">
				<label class="col-sm-2 control-label">{{item.name}}</label>
				<div class="col-sm-10">
					<select v-model="formData.data[item.fieldname]">
						<option v-for="ops in item.setting.option.options.split('\n')"  v-bind:value="(ops.split('|'))[1]">{{(ops.split("|"))[0]}}</option>

                      <!-- <optgroup label="Alaskan/Hawaiian Time Zone">
                          <option value="AK">Alaska</option>
                          <option value="HI">Hawaii</option>
                      </optgroup> -->
                  </select>
				</div>
			</div>
			<!-- 下拉框*************结束 -->
			<!-- 多行文本框*************开始 -->
			<div v-else-if="item.fieldtype=='Textarea'" class="clearfix">
				<label class="col-sm-2 control-label">{{item.name}}</label>
				<div class="col-sm-10">
					<textarea :style="{width:item.setting.option.width+'px',height:item.setting.option.height+'px'}" class="form-control" v-model="formData.data[item.fieldname]"></textarea>
				</div>
			</div>
			<!-- 多行文本框*************结束 -->
			<!-- 文件上传框*************开始  customerIcon="fa fa-file-image-o"-->
			<div v-else-if="item.fieldtype=='file'||item.fieldtype=='Image'" class="clearfix">
				<label class="col-sm-2 control-label">{{item.name}}</label>
				<div class="col-sm-10">{{formData.data[item.fieldname]}}
					<VueImgInputer v-model="formData.data[item.fieldname]" :fieldName="item.fieldname" :imgSrc="formData.data[item.fieldname]" @onChange="fileChange"></VueImgInputer>
				</div>
			</div>
			<!-- 文件上传框*************结束 -->
			<!-- 编辑器*************开始-->
			<div v-else-if="item.fieldtype=='Ueditor'" class="clearfix">
				<label class="col-sm-2 control-label">{{item.name}}</label>
				<div class="col-sm-10">
					<UE :defaultMsg="formData.data[item.fieldname]" :fieldName="item.fieldname" v-on:getContent="getUEContent" :config="config" :id="item.fieldname" ref="ue"></UE>
				</div>
			</div>
			<!-- 文件上传框*************结束 -->
			<!-- 日期选择器*************开始-->
			<div v-else-if="item.fieldtype=='Date'" class="clearfix">
				<label class="col-sm-2 control-label">{{item.name}}</label>
				<div class="col-sm-10">
					<div class="flex">
						<div>
						<datepicker v-on:picked="picked" :fieldName="item.fieldname" :moment="formData.data[item.fieldname]|time"></datepicker>
						</div>
				    </div>
				</div>
			</div>
			<!-- 日期选择框*************结束 -->
			<!-- 未知类型*************开始 -->
			<div v-else class="clearfix">
				未知类型：{{item.fieldtype}}
				
    </div>
			</div>
			<!-- 未知类型*************结束 -->
			
		</div>

	</div>
</template>
<script>
import VueImgInputer from '../components/imgInputer.vue'
import UE from '../components/ue/ue.vue';
import axios from 'axios'
import datepicker from '../components/calendar/calendar.vue'
  import bus from './bus'
export default {
	name: 'customForm',
	props: ['formData'],
	components: {
	    VueImgInputer,UE,datepicker
	  },
	data(){
		return {
			date: '2016-10-16',
			checkedNames:[],
			editor: null,
			defaultMsg: '',
	        config: {
	          initialFrameWidth: null,
	          initialFrameHeight: 350
	        },
		}
	},
	mounted() {
      	const _this = this;
      	 bus.$on('validate', this.onValidate)
      //Watch for the changes to the childs error bag and pass back to the parent
      this.$watch(() => this.errors.errors, (newValue, oldValue) => {
        const newErrors = newValue.filter(error =>
          find(propEq('field', error.field))(oldValue) === undefined
        )
        const oldErrors = oldValue.filter(error =>
          find(propEq('field', error.field))(newValue) === undefined
        )
        bus.$emit('errors-changed', newErrors, oldErrors)
      })
    },
	created(){

	},
	methods:{
		//datepicker变量设置事件
		picked(date,fieldName) {
			this.formData.data[fieldName]=Date.parse(new Date(date))/1000;
		},
		//编辑器变量设置事件
		getUEContent(data,fieldname) {
	        this.defaultMsg=data
	        this.formData.data[fieldname]=data;
	        //console.log(this.formData.data[fieldname])
	      },
	    //图片上传框
      	fileChange(file, name,fieldName) {
	        console.log('File:', file);
	        console.log('fileName:', name);
	        console.log('fieldName:', fieldName);
			
	        if(file<1){
	        	this.formData.data[fieldName]="";
	        	return false;
	        }          
			let param = new FormData(); //创建form对象
			param.append('file',file,name);//通过append向form对象添加数据
			
			//console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
			let config = {
			headers:{'Content-Type':'multipart/form-data'}
			};  //添加请求头
			axios.post('http://www.oucnet.cn/api/v2/member/account/upload/signature',param,config)
			.then(response=>{
				this.formData.data[fieldName]=data;
	        })
	     },

        onValidate() {
        	this.$validator.validateAll();
        	/*if (this.errors.any()) {
        		 bus.$emit('errors-changed', this.errors.errors)
        }	*/
      	},
	    beforeDestroy() {
	      //When destroying the element remove the listeners on the bus.
	      //Useful for dynaically adding and removing child components
	      /*bus.$emit('errors-changed', [], this.errors.errors)
	      bus.$off('validate', this.onValidate)*/
	    },
	}
}
</script>

<style>
.control {
    position: relative;
    text-align: left;
}
.control.has-icon.has-icon-right>.fa {
    right: 4px;
}
.control.has-icon>.fa {
    display: inline-block;
    font-size: 14px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    vertical-align: top;
    width: 24px;
    color: #dbdbdb;
    pointer-events: none;
    position: absolute;
    top: 4px;
    z-index: 4;
}
</style>